<div class="container-fluid">
	
	<div id="matches">

	  	<div class="row">
			<span class="glyphicon glyphicon-calendar green"></span><h2 class="inline"> Próximos partidos <small>(Estás listo para salir a la cancha)</small></h2>     
		</div>
		
	    <div class="row">
	      <!--Body content-->
	
			<!-- Admin Matches -->
	      <ul class="matchesList">
	      	<li ng-repeat="match in matches.Admin | filter:query | orderBy:date" class="thumbnail match-listing" ng-click="openMatch(match.id)" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
				<div id="matchAdmin">
					<p class="img-container md"><img src="{{match.admin.photo_url}}" /></p>
					<p>{{match.admin.name}} {{match.admin.lastname}}</p> 
				</div>
				<div id="matchType">
					<i class="fa fa-futbol-o fa-4x gray"></i>
					<h3>{{match.type.name}}</h3>
					<p ng-class="{'orange': (match.type.totalPlayers - match.guestsConfirmedAmount) < 2}">Faltan {{match.type.totalPlayers - match.guestsConfirmedAmount}} de {{match.type.totalPlayers}}</p>
				</div>
				<div id="matchDate">
					<i class="fa fa-clock-o fa-4x gray"></i>
					<h3>{{match.date | dateFormat:'dddd D [de] MMMM'}}</h3>
					<p>{{match.date | dateFormat:'HH:mm'}}hs</p>
				</div>
				<div id="matchField">
					<i class="fa fa-group fa-4x gray"></i>
					<h3>{{match.field.name}}</h3>
					<p>{{match.field.town}}</p>
				</div>
				<div id="matchActions" class="bordered">
					<div class="action captain" style="cursor: none;">C</div>
					<div ng-click="openMatch(match.id)" class="bordered action edit"><span class="glyphicon glyphicon-pencil gray"></span></div>
				</div>
			</li>
	      </ul>
	      
	      <!-- Guest Matches -->
	      <ul class="matchesList">
	      	<li ng-repeat="match in matches.Guest | filter:query | orderObjectBy:'date'" class="thumbnail match-listing">
				<div id="matchAdmin" ng-click="openMatch(match.id)">
					<p class="img-container md"><img src="{{match.admin.photo_url}}" /></p>
					<p>{{match.admin.name}} {{match.admin.lastname}}</p> 
				</div>
				<div id="matchType" ng-click="openMatch(match.id)">
					<i class="fa fa-futbol-o fa-4x gray"></i>
					<h3>{{match.type.name}}</h3>
					<p ng-class="{'orange': (match.type.totalPlayers - match.guestsConfirmedAmount) < 2}">Faltan {{match.type.totalPlayers - match.guestsConfirmedAmount}} de {{match.type.totalPlayers}}</p>
				</div>
				<div id="matchDate" ng-click="openMatch(match.id)">
					<i class="fa fa-clock-o fa-4x gray"></i>
					<h3>{{match.date | dateFormat:'dddd D [de] MMMM'}}</h3>
					<p>{{match.date | dateFormat:'HH:mm'}}hs</p>
				</div>
				<div id="matchField" ng-click="openMatch(match.id)">
					<i class="fa fa-group fa-4x gray"></i>
					<h3>{{match.field.name}}</h3>
					<p>{{match.field.town}}</p>
				</div>
				<div id="matchActions" class="bordered">
					<div class="bordered action play" ng-click="answerYes(match)" ng-class="{'ticked' : match.pivot.confirmed != null && match.pivot.confirmed == 1}"><span class="glyphicon glyphicon-ok" ng-class="{'green' : match.pivot.confirmed == null || match.pivot.confirmed == 0, 'darkYellow': match.pivot.confirmed != null && match.pivot.confirmed == 1}"></span></div>
					<div class="bordered action noPlay" ng-click="answerNo(match)" ng-class="{'ticked' : match.pivot.confirmed != null && match.pivot.confirmed == 0}"><span class="glyphicon glyphicon-remove"  ng-class="{'gray' : match.pivot.confirmed == null || match.pivot.confirmed == 1, 'darkOrange': match.pivot.confirmed != null && match.pivot.confirmed == 0}"></span></div>
					<div ng-click="openMatch(match.id)" class="bordered action open"><i class="fa fa-list gray"></i></div>
				</div>
			</li>
	      </ul>
	    </div>
    
    </div>
</div>